<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dayjs/day.js"></script>
    <script src="../Vue.js/vue.js"></script>
</head>
<body>
    <div class="root">
        <h2>显示格式化后的时间</h2> 
        计算属性： <div>{{cptime}}</div><br/><br/>
        函数实现： <div>{{mstime()}}</div><br/><br/>
        过滤器： <div>{{time | timeFormater}}</div><br/><br/>
        过滤器传参，其实传进了两个参数： <div>{{time | timeFormater('YYYY_MM_DD')}}</div><br/><br/>
        多过滤器： <div>{{time | timeFormater('YYYY_MM_DD') | mySlice}}</div>
    </div>
</body>
<script>
    //全局过滤器
    Vue.filter('mymySlice', function(value){
        return value.slice(0,4)
    })

    const vm = new Vue({
        el: ".root",
        data: {
            time: 1670142078209
        },
        computed:{
            cptime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            } 
        },
        methods: {
            mstime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        filters: {
            //局部过滤器, 只在这个vue实例中可以用
            timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
                return dayjs(value).format(str)
            },
            mySlice(value){
                return value.slice(0,4)
            }
        },
    })
</script>
</html>